<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Software Metrics By Software Engineering</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesdesign" name="author">

    <!-- datepicker -->
    <link href="/css/datepicker.min.css" rel="stylesheet" type="text/css">

    <!-- jvectormap -->
    <link href="/css/jqvmap.min.css" rel="stylesheet">

    <!-- Bootstrap Css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/css/app.min.css" rel="stylesheet" type="text/css">

</head>

<body data-topbar="colored">

<!-- Begin page -->
<div id="layout-wrapper">

    <header id="page-topbar">
        <div class="navbar-header">
            <div class="d-flex">
                <!-- LOGO -->
                <div class="navbar-brand-box">
                    <a href="" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                        <span class="logo-lg">
                                    <img src="/newImage/logo.png" alt="" height="60">
                                </span>
                    </a>

                    <a href="" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="/picture/logo-sm-light.png" alt="" height="22">
                                </span>
                        <span class="logo-lg">
                                    <img src="/picture/logo-light.png" alt="" height="20">
                                </span>
                    </a>
                </div>

                <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                    <i class="mdi mdi-backburger"></i>
                </button>

                <!-- App Search-->
                <form class="app-search d-none d-lg-block">
                    <div class="position-relative">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="mdi mdi-magnify"></span>
                    </div>
                </form>
            </div>

            <div class="d-flex">

                <div class="dropdown d-inline-block d-lg-none ml-2">
                    <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-search-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="mdi mdi-magnify"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0" aria-labelledby="page-header-search-dropdown">

                        <form class="p-3">
                            <div class="form-group m-0">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="col-md-4">
                <div class="float-right d-none d-md-block">
                    <div class="dropdown">
                        <button class="btn btn-light btn-rounded dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="mdi mdi-settings-outline mr-1"></i> Settings
                        </button>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </header>

    <!-- ========== Left Sidebar Start ========== -->
    <div class="vertical-menu">

        <div data-simplebar="" class="h-100">

            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="/to/index" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-airplay"></i></div>
                            <span>首            页</span>
                        </a>
                    </li>
                    <li class="menu-title">Basic</li>
                    <li>
                        <a href="/size/goToSize" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-window-grid"></i></div>
                            <span>传统度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/functionPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-schedule"></i></div>
                            <span>功能点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/featurePoint" class="waves-effect mm-active">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart"></i></div>
                            <span>特征值度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/usecasePoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-chart-pie"></i></div>
                            <span>用例点度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/to/objectPoint" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-lock-access"></i></div>
                            <span>对象点度量</span>
                        </a>
                    </li>
                    <li class="menu-title">Oriented Object</li>
                    <li>
                        <a href="/toLK/goToLKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-sign-in-alt"></i></div>

                            <span>LK度量</span>
                        </a>
                    </li>

                    <li>
                        <a href="/toCK/goToCKMetrics" class="waves-effect">
                            <div class="d-inline-block icons-sm mr-1"><i class="uim uim-grids"></i></div>
                            <span>CK度量</span>
                        </a>
                    </li>

                </ul>
            </div>
            <!-- Sidebar -->
        </div>
    </div>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">

            <!-- Page-Title -->
            <div class="page-title-box">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="page-title mb-1">Feature Point Metric</h4>
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">Welcome to Software Metrics</li>
                            </ol>
                        </div>
                    </div>

                </div>
            </div>
            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">

                                    <h4 style="font-size: 20px" class="header-title">UFC(Unadjusted Function Count)</h4>

                                    <div class="table-responsive">
                                        <table class="table table-editable" style="font-size: 15px">
                                            <thead>
                                            <tr>
                                                <th>功能单元类型(Type)</th>
                                                <th>数量(Count)</th>
                                                <th>权值(Weight)</th>
                                            </tr>
                                            </thead>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">内部逻辑文件(ILF)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="1" onchange="calAll();">
                                                </td>
                                                <td data-original-value="7" style="font-weight: bold">7</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">外部接口文件(EIF)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="2" onchange="calAll();">
                                                </td>
                                                <td data-original-value="5" style="font-weight: bold">5</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">外部输入(EI)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="3" onchange="calAll();">
                                                </td>
                                                <td data-original-value="3" style="font-weight: bold">3</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">外部输出(EO)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="4" onchange="calAll();">
                                                </td>
                                                <td data-original-value="4" style="font-weight: bold">4</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">外部查询(EQ)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="5" onchange="calAll();">
                                                </td>
                                                <td data-original-value="3" style="font-weight: bold">3</td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">算法(Algorithms)</td>
                                                <td data-original-value="1">
                                                    <input class="form-control" type="text" placeholder="请输入数量" id="6" onchange="calAll();">
                                                </td>
                                                <td data-original-value="3" style="font-weight: bold">3</td>
                                            </tr>
                                            <tr style="background-color: #3051D3">
                                                <td style="color: white;font-weight: bold;font-size: 20px">UFC</td>
                                                <td data-original-value="0" colspan="6" style="color: white;font-weight: bold;"><span id="UFC"></span></td>
                                            </tr>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">

                                    <h4 style="font-size: 20px" class="header-title">VAF(Value Adjustment Factor)</h4>
                                    <p class="card-title-desc" style="color: red">注：0：不存在或者没有影响；1：偶尔的影响；2：轻微的影响；3：中等的影响；4：显著的影响；5：强烈的影响</p>

                                    <div class="table-responsive">
                                        <table class="table table-editable" style="font-size: 15px">
                                            <thead>
                                            <tr>
                                                <th style="width: 20%">技术复杂性因素(Factor)</th>
                                                <th style="width: 20%">影响(Degree)</th>
                                                <th style="width: 10%"></th>
                                                <th style="width: 20%">技术复杂性因素(Factor)</th>
                                                <th style="width: 20%">影响(Degree)</th>
                                                <th style="width: 10%"></th>
                                            </tr>
                                            </thead>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">数据通信</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range1" onchange="document.getElementById('show1').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show1">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">分布式数据处理</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range2" onchange="document.getElementById('show2').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show2">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">性能</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range3" onchange="document.getElementById('show3').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show3">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">使用强度高的配置</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range4" onchange="document.getElementById('show4').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show4">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">交易速度</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range5" onchange="document.getElementById('show5').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show5">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">在线数据输入</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range6" onchange="document.getElementById('show6').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show6">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">终端用户效率</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range7" onchange="document.getElementById('show7').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show7">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">在线更新</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range8" onchange="document.getElementById('show8').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show8">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">复杂处理</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range9" onchange="document.getElementById('show9').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show9">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">可重用性</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range10" onchange="document.getElementById('show10').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show10">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">易安装性</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range11" onchange="document.getElementById('show11').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show11">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">易操作性</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range12" onchange="document.getElementById('show12').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show12">3</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="color: #3051D3;font-weight: bold">多场所</td>
                                                <td>
                                                    <input type="range" class="custom-range " min="0" max="5" id="range13" onchange="document.getElementById('show13').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show13">3</span>
                                                </td>
                                                <td style="color: #3051D3;font-weight: bold">客户变更</td>
                                                <td>
                                                    <input type="range" class="custom-range" min="0" max="5" id="range14" onchange="document.getElementById('show14').innerHTML=value;calAll();">
                                                </td>
                                                <td style="text-align: center;font-weight: bold;font-size: 15px">
                                                    <span id="show14">3</span>
                                                </td>
                                            </tr>

                                            <tr style="background-color: #3051D3">
                                                <td style="color: white;font-weight: bold;font-size: 20px">VAF</td>
                                                <td data-original-value="0" colspan="5" style="color: white"><span id="VAF"></span></td>
                                            </tr>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h1>Feature Point 度量方法</h1>
                                            <h1>您的项目测试结果:</h1>
                                            <h1 style="color: #3051D3;font-weight: bold">FP = UFC * VAF</h1>
                                            <h1 style="color: #3051D3;font-weight: bold" id="result">result</h1>
                                            <hr>
                                            <p style="font-size: 15px;color: grey;">
                                                <h5>特征点度量是什么？</h5>
                                                功能点测量的超集(superset)，适用于算法复杂性较高的应用，主要应用于系统和工程软件的应用，例如，实时系统、过程控制软件及嵌入式软件应用。
                                                <br>
                                                ①在FP信息域值计算的基础上增加了一个新的软件特性，即算法——特定计算机程序中所包含的一个界定的计算问题；
                                                <br>
                                                ②在特征点的计算中，权值是固定的，而原来功能点的度量计算中，权值有简单、平均、复杂三种取值。
                                                PS：权值即加权因子
                                            </p>
                                            <div class="mt-4">
                                                <a href="/to/index" class="btn btn-primary btn-sm">了解更多相关内容 <i class="mdi mdi-arrow-right ml-1"></i></a>
                                            </div>
                                        </div>

                                        <div class="col-6 ml-auto">
                                            <div align="right">
                                                <img src="/newImage/pic4.png" alt="" class="img-fluid">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end container-fluid -->
            </div>
            <!-- end page-content-wrapper -->
        </div>
    </div>
    <!-- End Page-content -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    2020 © Software Metric.
                </div>
                <div class="col-sm-6">
                    <div class="text-sm-right d-none d-sm-block">
                        Copyright &copy; 2022.Software Engineering 1901 in CSU All rights reserved.
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- end main content-->

</div>
<!-- END layout-wrapper -->

<script>
    function calUFC()
    {
        var num1,num2,num3,num4,num5,num6;
        var result;

        if(document.getElementById("1").value == "")
        {
            num1 = 0;
        }
        else {
            num1 = parseInt(document.getElementById("1").value);
        }

        if(document.getElementById("2").value == "")
        {
            num2 = 0;
        }
        else {
            num2 = parseInt(document.getElementById("2").value);
        }

        if(document.getElementById("3").value == "")
        {
            num3 = 0;
        }
        else {
            num3 = parseInt(document.getElementById("3").value);
        }

        if(document.getElementById("4").value == "")
        {
            num4 = 0;
        }
        else {
            num4 = parseInt(document.getElementById("4").value);
        }

        if(document.getElementById("5").value == "")
        {
            num5 = 0;
        }
        else {
            num5 = parseInt(document.getElementById("5").value);
        }

        if(document.getElementById("6").value == "")
        {
            num6 = 0;
        }
        else {
            num6 = parseInt(document.getElementById("6").value);
        }

        result = 7*num1+7*num2+4*num3+5*num4+4*num5+3*num6;

        if(isNaN(result))
        {
            document.getElementById("UFC").innerText = "请您输入正确格式哦";
            document.getElementById("UFC").style = "color:#FF5252;font-weight: normal";
        }
        else {
            document.getElementById("UFC").innerText = result;
            document.getElementById("UFC").style = "color:white;";
        }

    }
</script>
<script>
    function calVAF()
    {
        var show1 = parseInt(document.getElementById("show1").innerText);
        var show2 = parseInt(document.getElementById("show2").innerText);
        var show3 = parseInt(document.getElementById("show3").innerText);
        var show4 = parseInt(document.getElementById("show4").innerText);
        var show5 = parseInt(document.getElementById("show5").innerText);
        var show6 = parseInt(document.getElementById("show6").innerText);
        var show7 = parseInt(document.getElementById("show7").innerText);
        var show8 = parseInt(document.getElementById("show8").innerText);
        var show9 = parseInt(document.getElementById("show9").innerText);
        var show10 = parseInt(document.getElementById("show10").innerText);
        var show11 = parseInt(document.getElementById("show11").innerText);
        var show12 = parseInt(document.getElementById("show12").innerText);
        var show13 = parseInt(document.getElementById("show13").innerText);
        var show14 = parseInt(document.getElementById("show14").innerText);

        var temp = show1+show2+show3+show4+show5+show6+show7+show8+show9+show10+show11+show12+show13+show14;

        document.getElementById("VAF").innerText = 0.65+0.01*temp;

    }
</script>
<script>
    function calAll()
    {
        calUFC();
        calVAF();

        var ufc;
        var vaf;

        if(document.getElementById("UFC").innerText == "")
        {
            ufc = 0;
        }
        else {
            ufc = parseFloat(document.getElementById("UFC").innerText);
        }

        if(document.getElementById("VAF").innerText == "")
        {
            vaf = 0;
        }
        else {
            vaf = parseFloat(document.getElementById("VAF").innerText);
        }

        var result = ufc*vaf;

        if(isNaN(result))
        {
            document.getElementById("result").innerText = "请您输入正确格式哦";
            document.getElementById("result").style = "color:#FF5252;font-weight: normal";
        }
        else {
            document.getElementById("result").innerText = result;
            document.getElementById("result").style = "color:#3051D3;";
        }
    }
</script>
<!-- JAVASCRIPT -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/metisMenu.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/waves.min.js"></script>

<script src="/js/bundle.js"></script>

<!-- datepicker -->
<script src="/js/datepicker.min.js"></script>
<script src="/js/datepicker.en.js"></script>

<!-- apexcharts -->
<script src="/js/apexcharts.min.js"></script>

<script src="/js/jquery.knob.min.js"></script>

<!-- Jq vector map -->
<script src="/js/jquery.vmap.min.js"></script>
<script src="/js/jquery.vmap.usa.js"></script>

<script src="/js/dashboard.init.js"></script>

<script src="/js/app.js"></script>

</body>
</html>
